<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../js/jquery1.11.3.js"></script>
</head>

<!-- 
    each会把所有匹配项组成一个大的类数组集合
    可以遍历的内容
    数组
    对象
    类数组（jq对象）

    3中each 
    给juery设置属性 $.each 遍历数组 对象 和for-in一模一样
    是jq实例对象调用共有方法 
    内置each
 -->

<body>
    <ul class="demo1">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <ul class="demo2">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>


    <script>
        // 遍历数组 
        let arr = [10, 52, 42, 0]
        $.each(arr, (index, element) => console.log(index, element))
        // 遍历对象
        let obj = { name: 'zs', age: 10, gender: 'male' }
        Object.prototype.aa = '13' //原型对象上也可以遍历出来
        $.each(obj, (key, element) => {
            if (!obj.hasOwnProperty(key)) return false
            console.log(key, element)
        })
        // 箭头函数thiswindow element也是原生js对象
        $('ul.demo1>li').each((index, element) => {
            $(element).on('click', function () {
                $(this).css({ color: 'red' })
                console.log(index)
            })
        })
        // $('ul.demo2>li').each(function () {
        //     $(this).on('click', function () {
        //         $(this).css({ "color": "red" })
        //     })
        // })
        // 获取jq集合，jq会默认把集合进行each遍历。把每一项都绑定事件内置each
        $('.demo2 li').click(function () {
            $(this).css({ color: "#ff0011", "background": "blue" })

        })



        // 普通函数里面this是当前遍历的这一项 原生js elemetn也是原生
        // $('ul li').each(function (index, element) {
        //     console.log(element)
        // })
    </script>
</body>

</html>